<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的插槽 slot</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="app">
    <child content='<p>L</p>'></child>
</div>
<script>
    Vue.component('child', {
        props: ['content'],
        template: `<div>
                    <p>hello</p>
                    {{content}} 没有被渲染
                    <div v-html="this.content"></div> 使用v-html解决，但是必须在外面嵌套一层div，
                    且如果有很多的代码时，影响阅读不易维护，此时应该使用插槽slot
                    <br>
                    <template v-html="this.content"></template> 使用template无法渲染出来
                   </div>`
    })
    var app = new Vue({
        el: '#app'
    });
</script>
</body>
</html>